<template>
  <div id="cit_list">
    <p>&nbsp;</p>
    <div id="searcher">
      <md-input-item
        v-on:input="search"
        type="text"
        v-model="searchValue"
        class="searcher-input"
        ref="searcher-input"
        placeholder="请选择服务城市"
      >
        <md-icon class="sousuo_icon" name="sousuo" slot="left"></md-icon>
        <md-icon class="clear_icon" name="clear_icon" slot="right" @click="clearBtn"></md-icon>
      </md-input-item>
    </div>
    <div v-show="isSearchCity" class="cityList">
      <ul class="search_citylist">
        <li v-for="(item, index) in cityNameList" :key="index" @click="getCity(item)">{{ item.name }}</li>
      </ul>
    </div>
    <div class="cityList" v-show="isSearch">
      <div class="cityLeft" ref="cityLeft">
        <div class="citycontent">
          <div class="city_name" v-for="(itemName, index) in cityData" :key="index" ref="cityList">
            <p>{{ itemName.name }}</p>
            <ul>
              <li
                v-for="(itemList, indexList) in itemName.items"
                :key="indexList"
                @click="getCity(itemList)"
              >{{ itemList.name }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="city_letter" ref="cityRight">
        <h6
          :class="activeClass == indexLetter ? 'active' : ''"
          v-for="(item, indexLetter) in cityData"
          :key="indexLetter"
        >{{ item.name }}</h6>
      </div>
    </div>
  </div>
</template>
<script>
import { Icon, Field, FieldItem, InputItem, Toast, Dialog } from 'mand-mobile';
import Loading from '@/components/loading';
import '@/assets/svgs/sousuo.svg';
import '@/assets/svgs/clear_icon.svg';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      title: '选择城市',
      searchValue: '',
      cityData: [],
      activeClass: '',
      cityNameList: [], // 搜索城市列表
      isSearchCity: false,
      isSearch: true
    };
  },
  mounted() {
    let parm = {
      serviceType: this.$route.query.serviceType
    };
    Loading.show();
    http.post('pakj/city/getOpenCityListB', parm).then(res => {
      Loading.hide();
      console.log(res.data);
      if (res.data.code === '000000') {
        var cityArray = [];
        var cityDic = {};
        for (var index in res.data.data) {
          var value = res.data.data[index];
          var name;
          var cname;
          name = value['cityName'];
          var id = value.cityId;
          var p = pinyinUtil.getFirstLetter(name.substr(0, 1));
          var city = {
            name: name,
            tags: name + p,
            cityid: id,
            customName: name
          };
          if (cityDic[p]) {
            cityDic[p].push(city);
          } else {
            cityDic[p] = [city];
          }
        }
        for (var k in cityDic) {
          var cities = cityDic[k];
          cityArray.push({
            name: k,
            items: cities,
            number: k.charCodeAt()
          });
        }
        cityArray.sort(function(a, b) {
          return a.number - b.number;
        });
        this.cityData = cityArray;
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    clearBtn() {
      this.searchValue = '';
    },
    getCity(obj) {
      sessionStorage['cityId'] = obj.cityid;
      sessionStorage['cityName'] = obj.name;
      if (sessionStorage['backCity'] === '2') {
        window.location.href =
          '/driverrecruitment/drivercity?type=' +
          this.$route.query.type +
          '&driverphone=' +
          this.$route.query.driverphone +
          '&cardType=' +
          this.$route.query.cardType +
          '&serviceType=' +
          this.$route.query.serviceType;
      } else {
        if (this.$route.query.driverid) {
          window.location.href =
            '/driverrecruitment/driverQuickIdentity?type=' +
            this.$route.query.type +
            '&driverphone=' +
            this.$route.query.driverphone +
            '&cardType=' +
            this.$route.query.cardType +
            '&driverid=' +
            this.$route.query.driverid +
            '&serviceType=' +
            this.$route.query.serviceType;
        } else {
          window.location.href =
            '/driverrecruitment/driverQuickIdentity?type=' +
            this.$route.query.type +
            '&driverphone=' +
            this.$route.query.driverphone +
            '&cardType=' +
            this.$route.query.cardType +
            '&serviceType=' +
            this.$route.query.serviceType;
        }

        // this.$router.push({
        //     name: 'driverQuickIdentity',
        //     query: {
        //         type: this.$route.query.type,
        //         driverphone: this.$route.query.driverphone,
        //         cardType: this.$route.query.cardType,
        //         serviceType: this.$route.query.serviceType,
        //         driverid: this.$route.query.driverid
        //     }
        // });
      }
    },
    //搜索城市
    search() {
      var tab = this.cityData;
      this.cityNameList = [];
      if (this.searchValue) {
        this.isSearchCity = true;
        this.isSearch = false;
        for (var j in tab) {
          for (var k in tab[j].items) {
            if (tab[j].items[k].name.indexOf(this.searchValue) >= 0) {
              this.cityNameList.push(tab[j].items[k]);
            }
          }
        }
      } else {
        this.isSearchCity = false;
        this.isSearch = true;
      }
    }
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#cit_list {
  background-color: #EFEFEF;
}

#searcher {
  background-color: #fff;
  font-size: 28px;
  height: 88px;
  margin-left: 30px;
  margin-right: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 15px;

  .sousuo_icon {
    width: 30px;
    height: 30px;
    padding-left: 15px;
  }

  .clear_icon {
    width: 30px;
    height: 30px;
    padding-right: 15px;
  }

  .searcher-input {
    border: 0px;
    outline: none;
    width: 80%;
    background-color: transparent;
  }

  .searcher-btn {
    color: #888888;
    padding-left: 20px;
  }
}

.cityList {
  background-color: #fff;
}

.city_name {
}

.city_name p {
  height: 70px;
  line-height: 70px;
  background-color: #EFEFEF;
  font-size: 30px;
  padding: 0px 30px;
}

.city_name ul {
  padding: 0px 30px;
}

.city_name ul li {
  font-size: 24px;
  height: 70px;
  line-height: 70px;
  color: #333;
}

.city_letter {
  position: fixed;
  right: 30px;
  top: 180px;
}

.city_letter h6 {
  font-size: 28px;
  color: #333;
  font-weight: 400;
  margin-top: 5px;
}

.city_letter h6.active {
  color: red;
}

.search_citylist {
  margin-top: 30px;
  padding: 0px 30px;
}

.search_citylist li {
  font-size: 24px;
  height: 70px;
  line-height: 70px;
  color: #333;
}
</style>
